layui.use('element', function(){
    var element = layui.element;
    function treeMenu(a) {
        this.tree = a || [];
        this.groups = {};
    };
    treeMenu.prototype = {
        init: function (pid) {
            this.group();
            return this.getDom(this.groups[pid], 0);
        },
        group: function () {
            for (var i = 0; i < this.tree.length; i++) {
                if (this.groups[this.tree[i].parentId]) {
                    this.groups[this.tree[i].parentId].push(this.tree[i]);
                } else {
                    this.groups[this.tree[i].parentId] = [];
                    this.groups[this.tree[i].parentId].push(this.tree[i]);
                }
            }
        },
        getDom: function (a, bole) {
            if (!a) {
                return ''
            }

            if (bole == 0) {
                var html = '<ul class="layui-nav layui-nav-tree" lay-shrink="all">';
            } else {
                var html = '<ul class="layui-nav-child">';
            }
            for (var i = 0; i < a.length; i++) {
                if (bole == 0) {
                    html += '<li class="layui-nav-item"><a href="'+a[i].perHref+'"><i class="'+a[i].perIcon+'"></i><span>' + a[i].perName +'</span></a>';

                } else {
                    html += '<li lay-unselect><a class="J_menuItem" data-class="'+a[i].perIcon+'" href="'+a[i].perHref+'"><i class="'+a[i].perIcon+'"></i><span>' + a[i].perName + '</span></a>';
                }
                html += this.getDom(this.groups[a[i].perId], 1);
                html += '</li>';
            };
            html += '</ul>';
            return html;
        }
    };
    $(".jelly-menu").html(new treeMenu(menu).init(0));
    element.init();
});
